<template>
  <view>
    <view class="main">
      <view class="top">
        <image src="" mode="aspectFill" />
        杭州艺星医疗美容医院
      </view>
      <view class="spBox">
        <image src="" mode="aspectFill" />
        <view class="r">
          <view class="tit">小米·口袋照片打印机</view>
          <view class="gg">商品规格：光感嫩肤</view>
          <view class="label">到店使用</view>
          <view class="price"
            >￥ 8888
            <view class="num">x1</view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view>服务地点</view>
      <view class="dd">
        <image class="ddimg" src="../../static/shop/dd.png" mode="aspectFill" />
        <view class="r">
          <view class="t">浙江省杭州市滨江区江汉路1515号龙湖 滨江天街B-2f</view>
          <view class="b">
            <view>距离江汉路地铁站C口步行100米</view>
            <view class="ricon">
              <image src="../../static/shop/dh.png" mode="aspectFill" />
              <image src="../../static/shop/tel.png" mode="aspectFill" />
            </view>
          </view>
        </view>
      </view>
      <view class="zy">
        <view class="label">注意事项</view>
        <view>消肿管理、免费拆线、术后伤口/皮肤管理、专业回访跟踪、水果/果盘、茶水/饮料、糕点/糖果、无线WIFI、免费停车</view>
      </view>
    </view>
    <view class="payBox main">
      <radio-group @change="radioChange">
        <label class="uni-list-cell uni-list-cell-pd">
          <view class="zfbbox">
            <view class="left">
              <image class="img" src="../../static/shop/wx.png" mode="aspectFill" />

              <view class="textBox">
                <view>微信</view>
                <view>实时支付</view>
              </view>
            </view>
            <view>
              <radio value="wechat" :checked="'wechat' === payType" color="#81d8d0" />
            </view>
          </view>
        </label>

        <label class="uni-list-cell uni-list-cell-pd">
          <view class="zfbbox">
            <view class="left">
              <image class="img" src="../../static/shop/zfb.png" mode="aspectFill" />

              <view class="textBox">
                <view>支付宝</view>
                <view>实时支付</view>
              </view>
            </view>
            <view>
              <radio value="alipay" :checked="'alipay' === payType" color="#81d8d0" />
            </view>
          </view>
        </label>
        <label class="uni-list-cell uni-list-cell-pd">
          <view class="zfbbox">
            <view class="left">
              <image class="img" src="../../static/shop/ye.png" mode="aspectFill" />

              <view class="textBox">
                <view>余额</view>
                <view>当前余额：¥0 </view>
              </view>
            </view>
            <view>
              <radio value="balance" :checked="'balance' === payType" color="#81d8d0" />
            </view>
          </view>
        </label>
      </radio-group>
    </view>
    <view class="bottomBox">
      <view class="l">
        合计：<view class="p"><text>￥</text> 123</view>
      </view>
      <u-button @click="submitOrder" shape="circle" type="primary" style="width: 300rpx" color="#81d8d0">提交订单</u-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";

const payType = ref("balance");
const radioChange = (evt: any) => {
  payType.value = evt.detail.value;
};
const submitOrder = () => {};
</script>
<style lang="less" scoped>
.main {
  background: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  padding: 32rpx;
  .top {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #333333;
    image {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background: #7c8294;
      margin-right: 20rpx;
    }
  }
  .spBox {
    display: flex;
    margin-top: 36rpx;
    image {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      background: #e3d6d4;
    }
    .r {
      width: calc(100% - 180rpx);
      .tit {
        font-size: 28rpx;
        color: #000000;
      }
      .gg {
        font-size: 24rpx;
        color: #8a8a8d;
        margin-top: 8rpx;
      }
      .label {
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        border: 2rpx solid #f3f4f6;
        width: 96rpx;
        height: 28rpx;
        font-size: 20rpx;
        color: #8a8a8d;
        text-align: center;
        margin-top: 16rpx;
      }
      .price {
        font-size: 32rpx;
        color: #ea3b3b;
        display: flex;
        justify-content: space-between;
        .num {
          font-size: 32rpx;
          color: #000000;
        }
      }
    }
  }
}
.dd {
  background: #f8fafb;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  .ddimg {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }
  .r {
    width: calc(100% - 58rpx);
    font-size: 24rpx;
    color: #192126;
    image {
      width: 32rpx;
      height: 32rpx;
    }
    .b {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22rpx;
      color: #a6a9af;
      margin-top: 8rpx;
    }
  }
}
.zy {
  display: flex;
  margin-top: 34rpx;
  font-size: 24rpx;
  color: #333333;
  line-height: 36rpx;
  .label {
    width: 96rpx;
    font-size: 24rpx;
    color: #8a8a8d;
    flex-shrink: 0;
    margin-right: 20rpx;
  }
}
.payBox {
  border-radius: 8px;
  margin-top: 20rpx;
  color: #9694ae;
  .zfbbox {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
    align-items: center;
    padding-bottom: 20rpx;
    color: #000;
    .left {
      display: flex;
      .img {
        width: 56rpx;
        height: 56rpx;
      }
      .iconBox {
        position: relative;
        margin-right: 14rpx;
        .img,
        .icon {
          width: 38rpx;
          height: 38rpx;
          position: absolute;
          left: 20rpx !important;
          top: 20rpx !important;
        }
        .icon {
          left: 0;
          top: 0;
        }
      }
      .textBox {
        font-size: 30rpx;
        color: #000;
        margin-left: 30rpx;
        & > view {
          &:last-child {
            color: #a6a9af;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
.bottomBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .l {
    width: calc(100% - 300rpx);
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #9694ae;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .p {
      font-size: 38rpx;
      color: #fff;
      text {
        font-size: 24rpx;
        margin-right: -10rpx;
      }
    }
  }
}
</style>
